<template>
	<view class="shell">
		<view class="HMSM">
			<!-- 奖品列表 -->
			<view v-for="(block,inblock) in shaftList" :key="inblock" class="box"
				:style="{transform: 'translate3d('+ translateX[inblock]+ 'px,0, 0)','transition-duration':duration+'ms'}">
				<view v-for="(item,index) in block" :key="index" class="box_item">
					<image :src="item.img"></image>
				</view>
			</view>

			<view class="line">

			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 低二/三列开始滚动的延迟
				delay: 0,
				// 位置
				translateX: [0, 0, 0],
				// 总的摇奖时间 单位毫秒
				duration: 3000,
				textList: [{
						name: '行李箱',
						value: 'luggage',
						img: '/static/test/3.png'
					},
					{
						name: '风筒',
						value: 'dryer',
						img: '/static/test/4.png'
					},
					{
						name: '平行车',
						value: 'balanceCar',
						img: '/static/test/5.png'
					},
					{
						name: 'iPad5',
						value: 'iPad',
						img: '/static/test/6.png'
					},
					{
						name: 'iPhone13',
						value: 'iPhone',
						img: '/static/test/1.png'
					},
					{
						name: 'airPods3',
						value: 'airPods',
						img: '/static/test/2.png'
					},
					{
						name: '平行车',
						value: 'balanceCar',
						img: '/static/test/5.png'
					},
					{
						name: 'iPad5',
						value: 'iPad',
						img: '/static/test/6.png'
					},
					{
						name: 'iPhone13',
						value: 'iPhone',
						img: '/static/test/1.png'
					},
					{
						name: 'airPods3',
						value: 'airPods',
						img: '/static/test/2.png'
					},
				],
				shaftList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			//随机数据
			init() {
				let arr = []
				//三行
				// for (let i = 0; i < 3; i++) {
					//五行
					for (let i = 0; i < 5; i++) {
					let arr1 = []
					for (let j = 0; j < 30; j++) {
						let index = Math.trunc(Math.random() * 10)
						let text = this.textList[index]
						////console.log('text',text)
						arr1.push(text)
					}
					arr.push(arr1)
				}
				////console.log('数据',arr)
				this.shaftList = arr
			},
			//开始抽奖
			start() {
				////console.log('触发子组件了')
				//从后端拿的中奖列表
				let arr = []
				//结果
				//三行
				// for (let i = 0; i < 3; i++) {
					//五行
					for (let i = 0; i < 5; i++) {
					let index = Math.trunc(Math.random() * 10)
					let text = this.textList[index]
					arr.push(text)
				}
				this.findPro(arr)
			},
			//定位结果数据
			findPro(list) {
				////console.log("list", list)
				for (let i = 0; i < list.length; i++) {
					for (let j = this.shaftList[i].length - 3; j >= 0; j--) {
						if (this.shaftList[i][j].name == list[i].name) {
							////console.log(list[i].name)
							////console.log(this.shaftList[i][j].name)
							this.translateX.splice(i, 1, 100 * (j-1) * -1)
							break;
						}
					}
				}
			},
			//重置数据
			reset(){
				this.duration = 0
				this.translateX = [0,0,0]
			}
		},
	}
</script>
<style lang="scss" scoped>
	.shell {
		padding: 0 30rpx;

		.HMSM {
			position: relative;
			width: 600rpx;
			overflow: hidden;
			z-index: 1;

			.box {
				width: 100%;
				display: flex;
				align-items: center;

				.box_item {

					image {
						width: 200rpx;
						height: 180rpx;
					}
				}
			}

			.line {
				background-color: red;
				width: 6rpx;
				height: 550rpx;
				position: absolute;
				z-index: 100;
				top: 0;
				left: 300rpx;
			}

		}
	}
</style>
